<template>
  <div class="menu-audit-container">
    <div class="back" @click="$router.back">
      <i class="el-icon-arrow-left c-font-b"></i>
      <span>菜谱审核</span>
    </div>
    <!-- 菜谱表单区域 -->
    <el-form :model="menuForm" class="menu-form">
      <el-form-item label="食堂">
        {{ menuForm.centeenName }}
      </el-form-item>
      <el-form-item label="日期">
        {{ menuForm.endTime }}
      </el-form-item>
      <el-form-item label="描述">
        {{ menuForm.description }}
      </el-form-item>
    </el-form>
    <!--      菜谱tab栏切换-->
    <el-tabs v-model="menuActive" @tab-click="handleClick">
      <el-tab-pane
        v-for="(menu, menuIndex) in menuTabs"
        :label="menu.label"
        :name="menu.name"
        :key="menuIndex"
      >
        <!--          表格区域-->
        <!-- 基础套餐档口表格 -->
        <el-table
          v-show="menuActive === 1"
          :data="menuWeekList"
          style="width: 100%; height: 400px; overflow-y: auto"
          border
          :header-cell-style="{ background: '#FEF6F6' }"
        >
          <el-table-column
            align="center"
            prop="businessTime"
            label="日期"
            width="180"
          >
          </el-table-column>
          <el-table-column v-for="(item, index) in basicList" :key="item.id">
            <template #header>
              <span class="c-text-center">{{ item.name }}({{ item.num }})</span>
            </template>
            <template #default="scope">
              <el-tag
                size="small"
                type="info"
                style="margin: 0 5px 5px 0"
                v-for="i in scope.row.basicOptionalList1[index]"
                :key="i.id"
                >{{ i.foodName }}</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 碗碗菜档口表格 -->
        <el-table
          v-show="menuActive === 2"
          :data="menuWeekList"
          style="width: 100%; height: 400px; overflow-y: auto"
          border
          :header-cell-style="{ background: '#FEF6F6' }"
        >
          <el-table-column
            align="center"
            prop="businessTime"
            label="日期"
            width="180"
          >
          </el-table-column>
          <el-table-column v-for="item in bowPrice" :key="item.id">
            <template #header>
              <span class="c-text-center">{{ item.price }}元</span>
            </template>
            <template #default="scope">
              <el-tag
                size="small"
                type="info"
                style="margin: 0 5px 5px 0"
                v-for="blow in scope.row.bowlsList[item.price]"
                :key="blow.id"
                >{{ blow.foodName }}</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 自选称菜档口表格 -->
        <el-table
          v-show="menuActive === 3"
          :data="menuWeekList"
          style="width: 100%; height: 400px; overflow-y: auto"
          border
          :header-cell-style="{ background: '#FEF6F6' }"
        >
          <el-table-column
            align="center"
            prop="businessTime"
            label="日期"
            width="180"
          >
          </el-table-column>
          <el-table-column v-for="(item, index) in chooseList" :key="item.id">
            <template #header>
              <span class="c-text-center">{{ item.name }}({{ item.num }})</span>
            </template>
            <template #default="scope">
              <el-tag
                size="small"
                type="info"
                style="margin: 0 5px 5px 0"
                v-for="i in scope.row.basicOptionalList2[index]"
                :key="i.id"
                >{{ i.foodName }}</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 审核意见区域 -->
    <div class="audit-content">
      <el-form :model="auditForm">
        <el-form-item label="审核意见">
          <el-input
            v-model="auditForm.content"
            type="textarea"
            style="width: 300px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button type="success" size="mini" @click="submit">通过</el-button>
        <el-button type="danger" size="mini" @click="reject">驳回</el-button>
        <el-button size="mini">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { menuAuditDetail, menuSubmitAudit } from "@/api/canteen/audit.js";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const menuForm = ref({});
// 当前菜谱ID
const menuId = ref("");
// 基础套餐头部数据
const basicList = ref([]);
// 碗碗菜头部数据
const bowPrice = ref([]);
// 自选称菜头部数据
const chooseList = ref([]);
// 菜谱审核表单数据
const auditForm = ref({});
// 获取菜谱详情
function getMenuDetail() {
  menuAuditDetail(menuId.value).then((res) => {
    menuForm.value = res.data.week;
    menuWeekList.value = res.data.weekday;
    basicList.value = res.data.JCList;
    bowPrice.value = res.data.bowPrice;
    chooseList.value = res.data.ZXList;
  });
}
// 通过
function submit() {
  if (auditForm.value.content) {
    menuSubmitAudit(menuId.value, {
      auditFlag: true,
      auditReason: auditForm.value.content,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("审核成功");
        auditForm.value.content = "";
        router.back();
      }
    });
  } else {
    ElMessage.warning("请填写审核意见");
  }
}
// 驳回
function reject() {
  if (auditForm.value.content) {
    menuSubmitAudit(menuId.value, {
      auditFlag: false,
      auditReason: auditForm.value.content,
    }).then((res) => {
      if (res.code === 200) {
        ElMessage.success("驳回成功");
        auditForm.value.content = "";
        router.back();
      }
    });
  } else {
    ElMessage.warning("请填写驳回意见");
  }
}
//当前选中tab
const menuActive = ref(1);
//tab栏数据
const menuTabs = ref([
  {
    label: "基础套餐档口",
    name: 1,
  },
  {
    label: "碗碗菜档口",
    name: 2,
  },
  {
    label: "自选称菜档口",
    name: 3,
  },
]);
// 菜谱周数据
const menuWeekList = ref([]);
onMounted(() => {
  menuId.value = route.query.id;
  getMenuDetail();
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 0;
}
/deep/.el-form-item__label {
  color: #666666;
}
/deep/ .el-table th {
  text-align: center !important;
}
.menu-audit-container {
  height: calc(100vh - 200px);
  overflow-y: auto;
  margin: 20px 0;
  border-radius: 6px;
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  background: #ffffff;
  padding: 10px 20px;

  .back {
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #edeff3;
  }
  .menu-form {
    padding: 20px;
  }
  .audit-content {
    padding: 40px 0;
    .btns {
      margin-top: 40px;
    }
  }
}
</style>
